<!-- 拼团详情 -->
<template>
	<view class="box" :style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.price }"
		v-if="dataForm.pk_id?true:false">
		<sww-swipe indicatorDots autoplay preview :list="swiperList" />

		<view class="product-details">
			<view class="count_down">
				<view class="count_down_title">
					<view class="count_down_img iconfont iconfont-e656"></view>
					<view class="u-m-l-10">拼团倒计时</view>
				</view>
				<view class="">{{ formatTitle() }} {{ day }} 天 {{ formatTime(hours) }}: {{ formatTime(minute) }}:
					{{ formatTime(second) }}</view>
			</view>
			<view class="produc-title">
				<view class="p-title">{{ dataForm.name }}</view>
				<view class="product-price">
					<text class="u-font-26">￥</text>
					<text class="u-font-32 price_num">{{ dataForm.price }}</text>
				</view>
			</view>
			<view class="box-group_work">
				<view class="group_work u-flex u-row-between" v-for="(item, index) in dataForm.detailed" :key="index">
					<view class="u-flex u-flex-1">
						<image :src="$formatImg(item.headimgurl)" class="group_work_img" mode=""></image>
						<view class="">{{ item.nickname }}</view>
					</view>
					<view class="u-flex">
						还差
						<text class="diff">{{ item.difference_num }}人</text>
						成团
						<view class="participate" @click="onBuy(index)">去参团</view>
					</view>
				</view>
			</view>
			<view class="u-p-l-20 u-p-r-20 ">
				<view class="details">产品详情</view>
			</view>
			<view class="parse_box">
				<u-parse :html="dataForm.remark"></u-parse>
			</view>
		</view>
		<view class="bottom_set">
			<view class="bottom_set-left">
				<view class="btn" @click="goHome">
					<u-icon name="home" class="btn-img"></u-icon>
					<view class="u-font-24 u-m-t-10">首页</view>
				</view>
				<view class="btn" @click="$customer">
					<button type="default" open-type="contact" class="kf-btn" />
					<u-icon name="kefu-ermai" class="btn-img"></u-icon>
					<view class="u-font-24 u-m-t-10">客服</view>
				</view>
			</view>
			<view class="share" v-if="guid ? true : false" @click="onBuy()">参与好友拼团</view>
			<view class="bottom_set-right u-flex" v-else>
				<view class="bottom_set-right_item" @click="onShowGg()">
					<view>￥{{ dataForm.sale_price }}</view>
					<view>{{ status == 2 ? '单买价格' : formatTitle() }}</view>
				</view>
				<view class="bottom_set-right_item r-set-color" @click="onBuy()">
					<view>￥{{ dataForm.price }}</view>
					<view>{{ status == 2 ? dataForm.number + '人开团' : formatTitle() }}</view>
				</view>
			</view>
		</view>
		<view class="kong" ></view>
		<u-popup v-model="show" mode="bottom" safe-area-inset-bottom border-radius="20" closeable>
			<view class="u-p-l-30  u-p-t-30  u-p-b-30">
				<view class="u-flex">
					<image :src="dataForm.logo" class="g-img"></image>
					<view class="g-box">
						<view class="g-price">价格：￥{{ dataForm.sale_price }}</view>
						<view class="">{{ dataForm.name }}</view>
					</view>
				</view>
				<view class="g-num-box ">
					<view class="g-num">数量</view>
					<u-number-box v-model="numValue" :min="0" :max="maxNum(dataForm.max_num, dataForm.stock_num)">
					</u-number-box>
				</view>
				<view class="g-qr" @click="buyProduct">
					<view :class="['g-qr-item',numValue<=0?'diable':'']">确认</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showBuy" mode="bottom" safe-area-inset-bottom border-radius="20" closeable>
			<view class="u-p-l-30  u-p-t-30  u-p-b-30">
				<view class="u-flex">
					<image :src="dataForm.logo" class="g-img"></image>
					<view class="g-box">
						<view class="g-price">价格：￥{{ dataForm.price }}</view>
						<view class="">{{ dataForm.name }}</view>
					</view>
				</view>
				<view class="g-num-box ">
					<view class="g-num">数量</view>
					<u-number-box v-model="numValue" :min="0" :max="maxNum(dataForm.max_num, dataForm.stock_num)">
					</u-number-box>
				</view>
				<view class="g-qr" @click="buyPin">
					<view :class="['g-qr-item',numValue<=0?'diable':'']">确认</view>
				</view>
			</view>
		</u-popup>
		<sww-login />
	</view>
</template>

<script>
	import {
		countTime
	} from '@/utils/moment/index.js';
	import {
		uniNavigate,
		uniBack,
		uniModal,
		uniCall
	} from '@/utils/uniPromise';
	import {
		pageShare
	} from '@/mixins/pageShare';
	export default {
		mixins: [pageShare],
		data() {
			return {
				swiperList: [],
				paramsObj: {},
				numValue: 1,
				show: false,
				showBuy:false,
				dataForm: {},
				groupIndex: null, //参团下标
				start: false,
				status: 1, // 1:未开始 2:进行中 3:已结束
				day: 0, //天
				hours: 0, //时
				minute: 0, //分
				second: 0, //秒
				guid: false ,//好友分享进来的拼团id,
				userIndex:'',//拼团用户选择下标
			};
		},

		computed: {
			formatTime(time) {
				//格式化时间
				return function(time) {
					time = time + '';
					return time[1] ? time : '0' + time;
				};
			},
			// 最大购买数量
			maxNum(max_num, stock_num) {
				let $this = this;
				return function(max_num, stock_num) {
					if (stock_num <= 0 || max_num < 0) $this.numValue = 0
					if (max_num === 0) {
						return stock_num;
					} else if(stock_num >= max_num){
						return max_num;
					}else {
						return stock_num;
					}
				};
			},
			formatTitle() {
				return function() {
					return this.status == 1 ? '未开始' : this.status == 2 ? '进行中' : '已结束';
				};
			}
		},

		watch: {
			// 倒计时
			start: {
				handler(val) {
					if (this.start) {
						let nowDate = new Date().getTime();
						if (nowDate < this.dataForm.start_time) {
							let count = this.dataForm.start_time - nowDate;
							this.status = 1;
							this.getCountTime(count);
						} else if (nowDate > this.dataForm.start_time && nowDate < this.dataForm.end_time) {
							// 进行中
							let count = this.dataForm.end_time - nowDate;
							this.getCountTime(count);
							this.status = 2;
						} else {
							this.status = 3;
						}
					}
				}
			}
		},

		onUnload() {
			//清除定时器
			clearInterval(this.time);
		},
		onLoad(options) {
			let {
				guid,
				id
			} = options;
			if (id) {
				this.initPage(id);
				this.guid = guid ? guid : false; //判断是否为好友分享进来的拼团
			}
		},
		onShow() {
			this.groupIndex = null;
			if (this.dataForm.pk_id) {
				this.initPage(this.dataForm.pk_id);
			}
		},
		onShareAppMessage: function() {
			return this.getShareAppMessage();
		},
		onShareTimeline: function() {
			return this.getShareTimeline();
		},
		methods: {
			initPage(pk_id) {
				this.$loading();
				this.$resPost('GetTeambuyProductDetailed', {
						pk_id
					})
					.then(res => {
						// if (!res.data.pk_id || res.data.status != 1) {
						// 	return Promise.reject();
						// }
						this.initImage(res.data);
						this.dataForm = res.data;
						if (this.guid) this.dataForm.guid = this.guid; //如果是分享进来拼团的把guid加入数据里面 在订单页面可以用页面栈获取到
						this.start = true;
						this.customShareParams(); // 设置当前产品页的分享参数
						this.$hide();
					})
					.catch(() => {
						this.$hide();
						uniModal({
							title: '商品已下架',
							showCancel: false,
							confirmText: '我知道了'
						}).then(() => {
							uniBack(1);
						});
					});
			},
			// 设置当前产品页的分享参数
			customShareParams() {
				if (!this.shareParams.title) {
					let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
					let curRoute = routes[routes.length - 1].route; //获取当前页面路由
					let curParam = routes[routes.length - 1].options; //获取路由参数
					let obj = this.swiperList.find((item) => {
						return item.img
					})
					this.shareParams = {
						title: this.dataForm.name,
						path: curRoute,
						query: curParam,
						imgUrl: obj && obj.img ? obj.img : ''
					};
					this.onShareByH5();
				}
			},
			// 返回首页
			goHome() {
				this.$to('/pages/index/index');
			},
			// 客服
			$customer() {
				// #ifdef H5
				let phone = this.vuex_business.custom_tel;
				uniCall(phone);
				// #endif
			},
			buyProduct() {
				if (this.status == 1) {
					this.$toast('未开始');
				} else if (this.status == 3) {
					this.$toast('活动已结束');
				} else {
					this.onSingle();
				}
			},

			getCountTime(count) {
				if (count > 0) {
					let obj = countTime(count);
					this.hours = obj.hours;
					this.minute = obj.minute;
					this.second = obj.second;
					this.day = obj.day;

					this.nextTime = obj.nextTime;
					this.time = setTimeout(() => {
						this.getCountTime(obj.nextTime);
					}, 1000);
				} else {
					this.start = 2 + this.status; //更改状态 这里是为了触发watch监听start里面的方法
				}
			},
			// 格式化接口返回的图片格式
			initImage(data) {
				let imageList = [];
				if (data.img) {
					imageList = data.img.split(',');
				}
				this.swiperList = imageList.reduce((pre, el) => {
					pre.push({
						img: el
					});
					return pre;
				}, []);
			},

			// 根据当前抢购状态提示用户
			Checkstatus(status) {
				if (status == 1) {
					this.$toast('未开始');
				} else {
					this.$toast('已结束');
				}
			},

			//拼团
			onBuy(index) {
				this.$login('initPage', this.dataForm.pk_id).then(() => {
					this.showBuy = true
					this.userIndex = index
				});
			},
			buyPin(){
				if(this.dataForm.stock_num <= 0){
					this.$toast('库存不足');
					return
				}else if(this.numValue<=0){
					this.$toast('已达最大限购数量');
					return
				}
				if (this.status == 2) {
					/*进行中*/
					this.groupIndex = this.userIndex; // 用户用户参团时拿到下标
					this.$linkTo('/package/product/group/order/index');
					return;
				}
				this.Checkstatus(this.status);
			},
			onShowGg() {
				this.show = true;
			},

			// 单买
			onSingle() {
				if(this.numValue<=0){
					return;
				}
				if (this.status == 2) {
					if (this.numValue <= 0) {
						this.$toast('请选择数量');
						return;
					}

					let paramsObj = {
						type: 'groupSingle',
						list: [{
							product_img: this.dataForm.logo,
							express_num: this.dataForm.express_num || 0, // 多少起免邮费
							express_price: this.dataForm.express_price||0, // 快递费用
							product_freight: this.dataForm.product_freight || [], // 运费模板
							num: this.numValue,
							price: this.dataForm.sale_price,
							product_id: this.dataForm.fk_pro_id,
							product_name: this.dataForm.name,
							fk_attr_id: this.dataForm.stock_id, // 属性库存id
							standard: this.dataForm.stock_name // 属性库存名称
						}]
					}


					// #ifdef  MP-BAIDU ||  MP-ALIPAY || MP-TOUTIAO	 
					this.paramsObj = paramsObj
					this.$to(`/package/product/local/order/index`)
					// #endif




					// #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO	 
					try {
						uniNavigate('/package/product/local/order/index').then(res => {
							res.eventChannel.emit('acceptParams', paramsObj);
						});
					} catch (e) {}
					// #endif 

					return;
				}
				this.Checkstatus(this.status);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.share {
		width: 100%;
		height: 100%;
		background-color: #ff8a2d;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #fff;
		font-weight: 700;
	}
	.kong{
		width: 100%;
		height: calc(100rpx + env(safe-area-inset-bottom));
		
	}
	.count_down {
		position: relative;
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		background-color: #ff8a2d;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #ffffff;
	}

	.count_down::before {
		content: '';
		position: absolute;
		top: -60rpx;
		width: 300rpx;
		height: 200rpx;
		left: -50rpx;
		background-color: rgba(255, 255, 255, 0.1);
		transform: rotate(-200deg);
	}

	.count_down_title {
		color: #ffffff;
		display: flex;
		align-items: center;
	}

	.count_down_img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 5rpx;
		color: #fff;
	}

	.produc-title {
		padding: 20rpx;
		border-bottom: 10rpx solid #f5f5f5;
	}

	.product-price {
		margin-top: 6rpx;
		color: var(--price);

		.price_num {
			font-weight: bold;
		}
	}

	.p-title {
		font-size: 30rpx;
		font-weight: 700;
	}

	.p-r {
		display: inline-block;
		margin-top: 20rpx;
	}

	.group_work {
		padding: 40rpx 20rpx;
	}

	.group_work_img {
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.diff {
		margin: 0 5rpx;
		color: var(--price);
	}

	.participate {
		font-size: 30rpx;
		color: #fff;
		background-color: var(--color);
		padding: 8rpx 20rpx;
		border-radius: 14rpx;
		margin-left: 20rpx;
	}

	.box-group_work {
		border-bottom: 10rpx solid #f5f5f5;
	}

	.details {
		line-height: 100rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.parse_box {
		padding: 0 10rpx;
	}

	.bottom_set {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: env(safe-area-inset-bottom);
		z-index: 999;
		background-color: #ffffff;
	}

	.btn {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 100%;
	}

	.kf-btn {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
		opacity: 0;
		z-index: 99;
	}

	.btn-img {
		width: 35rpx;
		height: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666666;
		font-size: 40rpx;
	}

	.bottom_set-left {
		display: flex;
		justify-content: space-between;
		width: 250rpx;
		height: 100%;
		align-items: center;
	}

	.bottom_set-right {
		flex: 1;
		height: 100%;
		color: #ffffff;
	}

	.bottom_set-right_item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex: 1;
		height: 100%;
		background-color: $theme2;
	}

	.r-set-color {
		background-color: #e93324;
	}

	.g-img {
		width: 140rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}

	.g-box {
		margin-top: auto;
		margin-left: 20rpx;
	}

	.g-price {
		color: $sww-theme-price;
	}

	.g-num-box {
		margin: 30rpx 0;
	}

	.g-num {
		margin-bottom: 30rpx;
	}

	.g-qr {
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	.g-qr-item {
		width: 100%;
		background-color: var(--color);
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		margin: 60rpx auto 0;
		&.diable{
			background-color:#ddd;
		}
	}
</style>
